<template>
	<view class="topic-nav-container">
		<tabBar :tabBars="tabBars"></tabBar>
		
		<view class="uni-tab-bar">
			<swiper :current="getIndex" class="swiper-box" :style="{height:swiperHeight+'px'}" @change="changeIndex">
				<swiper-item class="swiper-item" v-for="(items,index1) in newsList" :key="index1">
		
					<scroll-view class="scroll-v list scroll-Y" enableBackToTop="true" scroll-y @scrolltolower="loadMore(index1)">
						
							<template v-if="items.list.length > 0">
								<topicNew :list='items.list'></topicNew>
								<loadMore :loadtext="items.loadtext"></loadMore>
							</template>
						<template v-else>
							<noThing></noThing>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import tabBar from '../../components/tabbar/tabbar.vue'
	import loadMore from '../../components/common/load-more.vue'
	import noThing from '../../components/no-thing/no-thing.vue'
	import topicNew from '../../components/news/topic-new.vue'
	export default {
		components: {
			tabBar,
			loadMore,
			noThing,
			topicNew
		},
		computed: {
			getIndex() {
				return this.$store.getters.getTabIndex
			}
		},
		data() {
			return {
				swiperHeight:550,
				tabBars: [{
						name: '关注',
						id: 'guanzhu'
					},
					{
						name: '推荐',
						id: 'tuijian'
					}, {
						name: '体育',
						id: 'tiyu'
					}, {
						name: '热点',
						id: 'redian'
					}, {
						name: '财经',
						id: 'caijing'
					}, {
						name: '娱乐',
						id: 'yule'
					}, {
						name: '军事',
						id: 'junshi'
					}, {
						name: '历史',
						id: 'lishi'
					}, {
						name: '本地',
						id: 'bendi'
					},
				],
				newsList: [
					{
						loadtext: '上拉加载更多...',
						list: [
							
								{
									titlepic:"../../static/demo/topicpic/12.jpeg",
									title:'#淘宝记录簿#',
									desc:"120斤到85斤 我的反转人生",
									totalnum:50,
									todaynum:10
								},
								{
									titlepic:"../../static/demo/topicpic/12.jpeg",
									title:'#淘宝记录簿#',
									desc:"120斤到85斤 我的反转人生",
									totalnum:50,
									todaynum:10
								},
								{
									titlepic:"../../static/demo/topicpic/12.jpeg",
									title:'#淘宝记录簿#',
									desc:"120斤到85斤 我的反转人生",
									totalnum:50,
									todaynum:10
								},
								{
									titlepic:"../../static/demo/topicpic/12.jpeg",
									title:'#淘宝记录簿#',
									desc:"120斤到85斤 我的反转人生",
									totalnum:50,
									todaynum:10
								},
								{
									titlepic:"../../static/demo/topicpic/12.jpeg",
									title:'#淘宝记录簿#',
									desc:"120斤到85斤 我的反转人生",
									totalnum:50,
									todaynum:10
								},
								{
									titlepic:"../../static/demo/topicpic/12.jpeg",
									title:'#淘宝记录簿#',
									desc:"120斤到85斤 我的反转人生",
									totalnum:50,
									todaynum:10
								},
								{
									titlepic:"../../static/demo/topicpic/12.jpeg",
									title:'#淘宝记录簿#',
									desc:"120斤到85斤 我的反转人生",
									totalnum:50,
									todaynum:10
								},
								{
									titlepic:"../../static/demo/topicpic/12.jpeg",
									title:'#淘宝记录簿#',
									desc:"120斤到85斤 我的反转人生",
									totalnum:50,
									todaynum:10
								},
								{
									titlepic:"../../static/demo/topicpic/12.jpeg",
									title:'#淘宝记录簿#',
									desc:"120斤到85斤 我的反转人生",
									totalnum:50,
									todaynum:10
								},
							
						]
					},
					{
						loadtext: '上拉加载更多...',
						list: []
					},
					{
						loadtext: '上拉加载更多...',
						list: []
					},
					{
						loadtext: '上拉加载更多...',
						list: []
					},
					{
						loadtext: '上拉加载更多...',
						list: []
					},
					{
						loadtext: '上拉加载更多...',
						list: []
					},
					{
						loadtext: '上拉加载更多...',
						list: []
					},
					{
						loadtext: '上拉加载更多...',
						list: []
					},
					{
						loadtext: '上拉加载更多...',
						list: []
					}
				],
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.swiperHeight = res.windowHeight - uni.upx2px(90);
				}
			})
		},
		methods: {
loadMore(index){
						if(this.newsList[index].loadtext !== '上拉加载更多...'){return ;}
						this.newsList[index].loadtext = '加载中'
						console.log(this.newsList[index].loadtext)
						// this.newsList[index].loadtext = '没有更多'
						setTimeout(() => {
							let obj = {
									titlepic:"../../static/demo/topicpic/12.jpeg",
									title:'#淘宝记录簿#',
									desc:"120斤到85斤 我的反转人生",
									totalnum:50,
									todaynum:10
								}
							this.newsList[index].list.push(obj)
							this.newsList[index].loadtext = '上拉加载更多...'
						}, 1000);
			},
			changeIndex(e) {
				this.$store.commit('changeIndex', e.mp.detail.current)
			}
		}
	}
</script>

<style>
.topic-nav-container {
		width: 100%;
	}

	.swiper-box {
		margin-top: 80upx;
	}

	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	/* #endif */

	.tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.scroll-h {
		width: 750upx;
		height: 80upx;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		/* flex-wrap: nowrap; */
		/* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
	}

	.line-h {
		height: 1upx;
		background-color: #cccccc;
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34upx;
		padding-right: 34upx;
	}

	.uni-tab-item-title {
		color: #555;
		font-size: 30upx;
		height: 80upx;
		line-height: 80upx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #007AFF;
	}

	.swiper-box {
		flex: 1;
		width:100%;
	}

	.swiper-item {
		flex: 1;
		flex-direction: row;
	}

	.scroll-v {
		flex: 1;
		/* #ifndef MP-ALIPAY */
		flex-direction: column;
		/* #endif */
		width: 750upx;
	}
	.topic-new {
		padding:20upx;
	}
	.topic-new-title {
		font-size: 32upx;
	}
	.topic-new .topic-list {
		border-bottom: 1upx solid #eee;
		padding: 20upx 0;
	}
	.topic-list image {
		width:160upx;
		height:160upx;
		border-radius: 10upx;
		margin-right:20upx;
		
	}
	.topic-new .topic-list-right .title {
		font-size: 36upx;
		color:#333;
	}
	.topic-new .topic-list-right > view{
		font-size: 28upx;
		color:#b2b2b2;
	}
</style>
